import React from 'react';
import { timeData } from 'js/core/timeData';
import { Picker, DatePicker } from 'antd-mobile';
import echarts from 'js/lib/echarts';
import SelectTimeType from 'views/component/selectTimeType/selectTimeType';
import moment from 'moment';
import SelectRadioItem from 'views/component/radioOne/radio';
import api from 'js/api/index';
import { i18n } from 'js/core/i18n';
import './flow.scss';

class FlowSingleWeather extends React.Component {
  constructor() {
    super()
    this.state = {
      data: null,
      timetype: 'day',
      year: moment().year(),
      openStatus: false,
      loading: true,
    }
  }
  componentDidMount() {
    this.query = {
      timeType: 'day',
      year: moment().year(),
      DataType: this.props.DataType,
      DataTypeID: this.props.id,
    }
    this.getData()
  }
  getData = () => {
    this.query.DataTypeID = this.props.id;
    this.query.DataType = this.props.DataType;
    if (this.chart1) {
      this.chart1.dispose();
    }
    if (this.chart2) {
      this.chart2.dispose();
    }
    this.setState({ loading: true })
    api('/Flow/FlowSingleWeather', this.query).then(data => {
      this.setState({ loading: false })
      let cdata = data.data[0];
      this.setState({ data: cdata })
      let option1 = {
        textStyle: { fontSize: window.chatFontSize },
        grid: {
          left: '9%',
          top: '10%',
          width: '82%',
          height: '80%',
        },
        xAxis: {
          type: 'category',
          data: cdata.DataX,
          boundaryGap: false,
          axisTick: { show: false, lineStyle: { color: '#ccc' } },
          splitLine: { show: true, lineStyle: { color: '#ccc' } },
          axisLabel: { show: true, color: '#666', interval: 0 },
          axisLine: { show: true, lineStyle: { color: '#ccc' } },
        },
        yAxis: {
          type: 'value',
          axisTick: { show: false, lineStyle: { color: '#ccc' } },
          splitLine: { show: true, lineStyle: { color: '#ccc' } },
          axisLabel: { show: false, color: '#666', interval: 0 },
          axisLine: { show: true, lineStyle: { color: '#ccc' } },
        },
        dataZoom: {
          type: 'inside',
          zoomLock: true,
          startValue: cdata.DataX.length - 7,
          endValue: cdata.DataX.length - 1
        },
        series: {
          type: 'line',
          smooth: true,
          label: { normal: { show: true, color: '#666' } },
          lineStyle: { normal: { color: '#BFB1F7' } },
          data: cdata.DataY
        }
      }
      this.chart1 = echarts.init(this.refs.chart1);
      this.chart1.setOption(option1);
      let option2 = {
        textStyle: { fontSize: window.chatFontSize },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            data: cdata.WeatherData
          }
        ]
      };

      this.chart2 = echarts.init(this.refs.chart2);
      this.chart2.setOption(option2);
    });
  }
  open = () => {
    this.setState({ openStatus: !this.state.openStatus }, () => {
      this.chart2.resize();
    })
  }
  yearOnChange = (date) => {
    this.query.year = moment(date).year();
    this.setState({ year: moment(date).year() }, () => {
      this.getData();
    })
  }
  render() {
    let { year, data, openStatus, loading } = this.state;
    return <div className="box">
      <div className="boxHead flex-vcenter">
        <div className="title">{i18n.get("客流量-天气因素分析")}</div>
        <div className="unitText flex-g-1">({i18n.get("单位:人次")})</div>
        <div className="open flex-center" onClick={this.open}>{openStatus ? i18n.get('收起') : i18n.get('展开')}<div className={openStatus ? "close_icon" : "open_icon"}></div></div>
      </div>
      <DatePicker extra={i18n.get("请选择")} locale={{ DatePickerLocale: { year: i18n.get("年"), month: i18n.get("月"), day: i18n.get("日"), hour: i18n.get("时"), minute: i18n.get("分") } }} okText={i18n.get("确定")} dismissText={i18n.get("取消")} mode="year" value={new Date((new Date()).setFullYear(year))} onChange={this.yearOnChange}>
        <div className="selectYear flex-center">
          {i18n.get('年份选择')}:{year}
        </div>
      </DatePicker>
      <div className="chart" ref="chart1">
        {loading && <div className="loading"></div>}
      </div>
      <div className={openStatus ? "" : "hide"}>
        <div className="chartTitle">{i18n.get('天气变量-平均单日客流分析')}</div>
        <div className="chart" ref="chart2">
          {loading && <div className="loading"></div>}
        </div>
        <div className="chartTitle">{i18n.get('天气数量平均占比')}</div>
        {data && <div className="flex weatherBottom">
          <div className="flex-g-1 borderRight">
            <div className="perText">{data.WeatherBfb[0].value}</div>
            <div className="weatherName">{i18n.get('晴天')}({data.WeatherBfb[0].sundate})</div>
          </div>
          <div className="flex-g-1 borderRight">
            <div className="perText">{data.WeatherBfb[1].value}</div>
            <div className="weatherName">{i18n.get('阴天')}({data.WeatherBfb[1].cloud})</div>
          </div>
          <div className="flex-g-1">
            <div className="perText">{data.WeatherBfb[2].value}</div>
            <div className="weatherName">{i18n.get('雨/雪')}({data.WeatherBfb[2].rainSnow})</div>
          </div>
        </div>}
      </div>
    </div>
  }
}


class FlowActivity extends React.Component {
  constructor() {
    super()
    this.HolidayListObject = {}
    this.state = {
      data: null,
      timeType: 'day',
      openStatus: false,
      year: moment().year(),
      HolidayList: [],
      HolidayId: null,
      HolidayName: null,
      counttype: 1,
      loading: true,
      avgDataNone: false,
    }
  }
  componentDidMount() {
    this.query = {
      timeType: 'day',
      year: moment().year(),
      DataType: this.props.DataType,
      DataTypeID: this.props.id,
      counttype: 1,
    }
    this.HolidayYearList()
  }
  HolidayYearList = () => {
    api('/SysBase/HolidayDataYearList', { year: this.state.year, DataType: this.props.DataType, DataTypeID: this.props.id, }).then(data => {
      if (data.data && data.data.length > 0) {

        let HolidayList = data.data.map(item => {
          let d = {}
          d.value = item.HolidayId;
          d.label = item.HolidayName;
          d.startDate = moment(item.HolidayStartDate).format('MM/DD');
          d.endDate = moment(item.HolidayEndDate).format('MM/DD');
          this.HolidayListObject[item.HolidayId] = d;
          return d
        })

        this.query.HolidayId = HolidayList[0].value;
        this.startDate = HolidayList[0].startDate;
        this.endDate = HolidayList[0].endDate;

        this.setState({ HolidayList: HolidayList, HolidayId: this.query.HolidayId, HolidayName: data.data[0].HolidayName })

        this.getData();
      } else {
        this.query.HolidayId = null;
        if (this.chart1) {
          this.chart1.dispose();
          this.chart1 = null;
        }
        if (this.chart2) {
          this.chart2.dispose();
          this.chart2 = null;
        }
        if (this.chart3) {
          this.chart3.dispose();
          this.chart3 = null;
        }
        this.setState({ loading: 'none', HolidayName: i18n.get('暂无活动'), HolidayId: null, HolidayList: [] })
      }
    })
  }
  getData = () => {
    if (!this.query.HolidayId) {
      if (this.chart1) {
        this.chart1.dispose();
        this.chart1 = null;
      }
      if (this.chart2) {
        this.chart2.dispose();
        this.chart2 = null;
      }
      this.setState({ loading: 'none' })
      return
    }
    this.query.DataTypeID = this.props.id;
    this.query.DataType = this.props.DataType;
    if (this.chart1) {
      this.chart1.dispose();
    }
    if (this.chart2) {
      this.chart2.dispose();
    }
    if (this.chart3) {
      this.chart3.dispose();
    }
    this.setState({ loading: true })
    api('/Flow/FlowActivity', this.query).then(data => {
      this.setState({ loading: false })
      let cdata = data.data;
      let seriesData = [], xAxisData = [];
      let flag = false;
      let startValue = 0;
      cdata.CountBlow.dataY.forEach((item, index) => {
        if (cdata.CountBlow.dataX[index] === this.startDate) {
          flag = true;
          startValue = index;
        } else if (cdata.CountBlow.dataX[index] === this.endDate) {
          flag = false;
        }
        if (flag === true || cdata.CountBlow.dataX[index] === this.endDate) {
          xAxisData.push({
            value: cdata.CountBlow.dataX[index],
            textStyle: {
              color: '#D9251D',
              fontSize: 14
            }
          })
          seriesData.push({
            value: item,
            symbolSize: 6,
            label: {
              normal: {
                show: true,
                color: '#D9251D',
                fontSize: 16
              }
            }
          });
        } else {
          seriesData.push({
            value: item,
            symbolSize: 2,
            label: {
              normal: {
                show: true,
                color: '#ccc',
                fontSize: 12
              }
            }
          });
          xAxisData.push(cdata.CountBlow.dataX[index])
        }
      });

      let option1 = {
        textStyle: { fontSize: window.chatFontSize },
        grid: {
          left: '9%',
          top: '10%',
          width: '82%',
          height: '80%',
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          boundaryGap: false,
          axisTick: { show: false, lineStyle: { color: '#ccc' } },
          splitLine: { show: true, lineStyle: { color: '#ccc' } },
          axisLabel: { show: true, color: '#666', interval: 0 },
          axisLine: { show: true, lineStyle: { color: '#ccc' } },
        },
        yAxis: {
          type: 'value',
          axisTick: { show: false, lineStyle: { color: '#ccc' } },
          splitLine: { show: true, lineStyle: { color: '#ccc' } },
          axisLabel: { show: false, color: '#666', interval: 0 },
          axisLine: { show: true, lineStyle: { color: '#ccc' } },
        },
        dataZoom: {
          type: 'inside',
          zoomLock: true,
          startValue: startValue,
          endValue: startValue + 6
        },
        series: {
          type: 'line',
          smooth: true,

          lineStyle: { normal: { color: '#BFB1F7' } },
          data: seriesData
        }
      }
      this.chart1 = echarts.init(this.refs.chart1);
      this.chart1.setOption(option1);

      let option3 = {
        textStyle: { fontSize: window.chatFontSize },
        series: [
          {
            type: 'gauge',
            detail: { formatter: '{value}' },
            data: [{ value: cdata.CountBlow.blow }],
            max: 10,
            axisLine: {            // 坐标轴线
              lineStyle: {       // 属性lineStyle控制线条样式
                width: 12
              }
            },
            splitLine: {           // 分隔线
              length: 20,         // 属性length控制线长
              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
          }
        ]
      }
      this.chart3 = echarts.init(this.refs.chart3);
      this.chart3.setOption(option3);
      if (cdata.DayAvg.dataY.length > 0) {
        let dataY = [];
        let color = ['#83C8FF', '#BEB1F9', '#FFCDB2'];
        let dataX = cdata.DayAvg.dataX.map((item, index) => {
          if (item && item.length >= 8) {
            let itemArray = item.split('');
            itemArray.splice(parseInt(itemArray.length / 2), 0, '\n');
            item = itemArray.join('');
          }

          dataY.push({
            value: cdata.DayAvg.dataY[index],
            label: { normal: { show: true, position: 'right', color: '#333' } },
            itemStyle: {
              normal: { color: color[index] }
            }
          });

          return item;
        });

        let option2 = {
          textStyle: { fontSize: window.chatFontSize },
          color: color,
          grid: {
            left: '25%',
            right: '18%',
            bottom: '3%',
            top: '5%'
          },
          yAxis: {
            type: 'category',
            data: dataX,
            boundaryGap: true,
            axisTick: { show: false, lineStyle: { color: '#ccc' } },
            splitLine: { show: false, lineStyle: { color: '#ccc' } },
            axisLabel: { show: true, color: '#333', interval: 0 },
            axisLine: { show: true, lineStyle: { color: '#ccc' } },
          },
          xAxis: {
            type: 'value',
            axisTick: { show: false, lineStyle: { color: '#ccc' } },
            splitLine: { show: false, lineStyle: { color: '#ccc' } },
            axisLabel: { show: false, color: '#333', interval: 0 },
            axisLine: { show: false, lineStyle: { color: '#ccc' } },
          },
          series: [{
            type: 'bar',
            barWidth: 35,
            data: dataY
          }]
        }
        this.chart2 = echarts.init(this.refs.chart2);
        this.chart2.setOption(option2);
        this.setState({ avgDataNone: false })
      } else {
        this.setState({ avgDataNone: true })
      }

    });
  }
  timeTypeOnChange = (value) => {
    this.setState({ timeType: value })
  }
  open = () => {
    this.setState({ openStatus: !this.state.openStatus }, () => {
      this.chart3.resize();
      this.chart2.resize();
    })
  }
  yearOnChange = (date) => {
    this.query.year = moment(date).year();
    this.setState({ year: moment(date).year() }, () => {
      this.HolidayYearList();
    })
  }
  holidayOnChange = (value) => {
    let id = value[0];
    this.query.HolidayId = id;
    this.startDate = this.HolidayListObject[id].startDate;
    this.endDate = this.HolidayListObject[id].endDate;
    this.setState({ HolidayId: id, HolidayName: this.HolidayListObject[id].label }, () => {
      this.getData()
    })
  }
  counttypeOnchange = (value) => {
    this.query.counttype = value;
    this.setState({ counttype: value })
    this.getData()
  }
  render() {
    let { timeType, openStatus, year, HolidayList, HolidayId, HolidayName, counttype, loading, avgDataNone } = this.state;
    return <div className="box FlowActivity">
      <div className="boxHead flex-vcenter">
        <div className="title">{i18n.get('活动日客流量分析')}</div>
        <div className="unitText flex-g-1">({i18n.get("单位:人次")})</div>
        <div className="open flex-center" onClick={this.open}>{openStatus ? i18n.get('收起') : i18n.get('展开')}<div className={openStatus ? "close_icon" : "open_icon"}></div></div>
      </div>
      <div className="">
        <div className="mb5">
          <DatePicker extra={i18n.get("请选择")} locale={{ DatePickerLocale: { year: i18n.get("年"), month: i18n.get("月"), day: i18n.get("日"), hour: i18n.get("时"), minute: i18n.get("分") } }} okText={i18n.get("确定")} dismissText={i18n.get("取消")} mode="year" value={new Date((new Date()).setFullYear(year))} onChange={this.yearOnChange}>
            <div className="selectYear flex-center">
              {i18n.get('年份选择')}:{year}
            </div>
          </DatePicker>
        </div>
        <div className="">
          <Picker extra={i18n.get("请选择")} okText={i18n.get("确定")} dismissText={i18n.get("取消")} data={HolidayList} value={[HolidayId]} cols={1} onChange={this.holidayOnChange}>
            <div className="selectYear flex-center">
              {i18n.get('活动选择')}:{HolidayName}
            </div>
          </Picker>
        </div>
      </div>
      <SelectRadioItem data={[{ name: i18n.get('过客量'), id: 0 }, { name: i18n.get('入店量'), id: 1 }]} value={counttype} onChange={this.counttypeOnchange} />
      <div className="chart" ref="chart1">
        {loading === true && <div className="loading"></div>}
        {loading === 'none' && i18n.get('暂无数据')}
      </div>
      <div className={openStatus ? "" : "hide"}>
        <div className="chartTitle">{i18n.get('活动平均单日客流量走势')}</div>
        <div className="chart chart2" ref="chart2">
          {loading === true && <div className="loading"></div>}
          {(loading === 'none' || avgDataNone === true) && i18n.get('暂无数据')}
        </div>
        <div className="chartTitle">{i18n.get('活动客流量爆发力指数')}</div>
        <div className="chart flex-center" ref="chart3">
          {loading === true && <div className="loading"></div>}
          {loading === 'none' && i18n.get('暂无数据')}
        </div>
      </div>
    </div>
  }
}


class FlowPlateauEffectRentTrendChart extends React.Component {
  constructor() {
    super()
    this.state = {
      data: null,
      timetype: 'day',
      year: moment().year(),
      loading: true
    }
  }
  componentDidMount() {
    this.query = {
      timeType: 'day',
      year: moment().year(),
      DataType: this.props.DataType,
      DataTypeID: this.props.id
    }
    this.getData()
  }
  getData = () => {
    this.query.DataTypeID = this.props.id;
    this.query.DataType = this.props.DataType;
    if (this.chart1) {
      this.chart1.dispose();
    }
    if (this.chart2) {
      this.chart2.dispose();
    }
    this.setState({ loading: true })
    api('/Flow/FlowPlateauEffectRentTrendChart', this.query).then(data => {
      this.setState({ loading: false })
      let cdata = data.data;
      let option1 = this.getOption(cdata.PlateauEffect.dataX, cdata.PlateauEffect.dataY)
      this.chart1 = echarts.init(this.refs.chart1);
      this.chart1.setOption(option1);
      let option2 = this.getOption(cdata.RentTrend.dataX, cdata.RentTrend.dataY)
      this.chart2 = echarts.init(this.refs.chart2);
      this.chart2.setOption(option2);
    });
  }
  getOption = (dataX, dataY) => {
    return {
      textStyle: { fontSize: window.chatFontSize },
      grid: {
        left: '9%',
        top: '10%',
        width: '82%',
        height: '80%',
      },
      xAxis: {
        type: 'category',
        data: dataX,
        boundaryGap: false,
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: true, color: '#666', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      yAxis: {
        type: 'value',
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: false, color: '#666', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      dataZoom: {
        type: 'inside',
        zoomLock: true,
        startValue: dataX.length - 7,
        endValue: dataX.length - 1
      },
      series: {
        type: 'line',
        smooth: true,
        label: { normal: { show: true, color: '#666' } },
        lineStyle: { normal: { color: '#BFB1F7' } },
        data: dataY
      }
    }
  }
  timeTypeOnChange = (value) => {
    this.setState({ timeType: value })
  }
  yearOnChange = (date) => {
    this.query.year = moment(date).year();
    this.setState({ year: moment(date).year() }, () => {
      this.getData()
    })
  }
  render() {
    let { timeType, year, loading } = this.state;
    return <div className="box">
      <div className="boxHead flex-vcenter">
        <div className="title">{i18n.get('坪效走势图')}</div>
        <div className="unitText flex-g-1">({i18n.get("单位:人次")})</div>
      </div>
      <DatePicker extra={i18n.get("请选择")} locale={{ DatePickerLocale: { year: i18n.get("年"), month: i18n.get("月"), day: i18n.get("日"), hour: i18n.get("时"), minute: i18n.get("分") } }} okText={i18n.get("确定")} dismissText={i18n.get("取消")} mode="year" value={new Date((new Date()).setFullYear(year))} onChange={this.yearOnChange}>
        <div className="selectYear flex-center">
          {i18n.get('年份选择')}:{year}
        </div>
      </DatePicker>
      <div className="chart" ref="chart1">
        {loading && <div className="loading"></div>}
      </div>
      <div className="chartTitle">{i18n.get('单人次客流租金走势图')}</div>
      <div className="chart" ref="chart2">
        {loading && <div className="loading"></div>}
      </div>
    </div>
  }
}


class FlowHotSpotTimeTopThree extends React.Component {
  constructor() {
    super()
    this.state = {
      data: null,
      timeType: 'day',
      openStatus: false,
      counttype: 1,
      loading: true,
      year: moment().year(),
    }
  }
  componentDidMount() {
    this.query = {
      timeType: 'day',
      year: moment().year(),
      counttype: 1, //0-过客量 1-入店量 2-试穿量
      dataType: this.props.DataType,
      dataTypeID: this.props.id
    }
    this.getData()
  }
  getData = () => {
    this.query.dataTypeID = this.props.id;
    this.query.dataType = this.props.DataType;
    if (this.chart) {
      this.chart.dispose();
    }
    if (this.storeChart) {
      this.storeChart.dispose();
    }
    this.setState({ loading: true })
    api('/Flow/FlowHotSpotTimeTopThree', this.query).then(data => {
      this.setState({ loading: false })
      let cdata = data.data;
      this.chart = echarts.init(this.refs.chart);
      cdata.dataX = cdata.dataX.map(item => {
        return item.replace('-', '-\n');
      });
      let option = {
        textStyle: { fontSize: window.chatFontSize },
        grid: {
          left: '9%',
          top: '10%',
          width: '82%',
          height: '75%',
        },
        xAxis: {
          type: 'category',
          data: cdata.dataX,
          boundaryGap: false,
          axisTick: { show: false, lineStyle: { color: '#ccc' } },
          splitLine: { show: true, lineStyle: { color: '#ccc' } },
          axisLabel: { show: true, color: '#666', interval: 0 },
          axisLine: { show: true, lineStyle: { color: '#ccc' } },
        },
        yAxis: {
          type: 'value',
          axisTick: { show: false, lineStyle: { color: '#ccc' } },
          splitLine: { show: true, lineStyle: { color: '#ccc' } },
          axisLabel: { show: false, color: '#666', interval: 0 },
          axisLine: { show: true, lineStyle: { color: '#ccc' } },
        },
        dataZoom: {
          type: 'inside',
          zoomLock: true,
          startValue: cdata.dataX.length - 7,
          endValue: cdata.dataX.length - 1
        },
        series: {
          type: 'line',
          smooth: true,
          label: { normal: { show: true, color: '#666' } },
          lineStyle: { normal: { color: '#BFB1F7' } },
          data: cdata.dataY
        }
      }
      this.chart.setOption(option);
      this.storeChart = echarts.init(this.refs.pChart);
      let storeDataX = [], storeSeriesData = [];
      let color = ['#83C8FF', '#BEB1F9', '#FFCDB2'];
      data.data.top.forEach((item, index) => {
        storeDataX.unshift(item.desc.replace('-', '-\n'));
        storeSeriesData.unshift({
          value: item.CountData,
          label: { normal: { show: true, position: 'right', color: '#ccc' } },
          itemStyle: {
            normal: { color: color[index] }
          }
        });
      });
      let option1 = {
        textStyle: { fontSize: window.chatFontSize },
        grid: {
          left: '30%',
          right: '17%',
          bottom: '3%',
          top: '5%'
        },
        yAxis: {
          type: 'category',
          data: storeDataX,
          boundaryGap: true,
          axisTick: { show: false, lineStyle: { color: '#ccc' } },
          splitLine: { show: false, lineStyle: { color: '#ccc' } },
          axisLabel: { show: true, color: '#666', interval: 0 },
          axisLine: { show: true, lineStyle: { color: '#ccc' } },
        },
        xAxis: {
          type: 'value',
          axisTick: { show: false, lineStyle: { color: '#ccc' } },
          splitLine: { show: false, lineStyle: { color: '#ccc' } },
          axisLabel: { show: false, color: '#666', interval: 0 },
          axisLine: { show: false, lineStyle: { color: '#ccc' } },
        },
        series: [{
          type: 'bar',
          data: storeSeriesData
        }]
      }
      this.storeChart.setOption(option1);
    });
  }
  timeTypeOnChange = (value) => {
    this.query.timeType = value;
    this.setState({ timeType: value })
    this.getData();
  }
  open = () => {
    this.setState({ openStatus: !this.state.openStatus }, () => {
      this.storeChart.resize()
    })
  }
  yearOnChange = (date) => {
    this.query.year = moment(date).year();
    this.setState({ year: moment(date).year() }, () => {
      this.getData()
    })
  }
  counttypeOnchange = (value) => {
    this.query.counttype = value;
    this.setState({ counttype: value })
    this.getData()
  }
  render() {
    let { timeType, openStatus, counttype, loading, year } = this.state;
    let timeTypedata = [{ name: i18n.get('时'), value: 'hour' }, { name: i18n.get('日'), value: 'day' }, { name: i18n.get('月'), value: 'month' }]
    return <div className="flowHotSpotTimeTopThree box">
      <div className="boxHead flex-vcenter">
        <div className="title">{i18n.get('热点时段分析')}</div>
        <div className="unitText flex-g-1">({i18n.get("单位:人次")})</div>
        <div className="open flex-center" onClick={this.open}>{openStatus ? i18n.get('收起') : i18n.get('展开')}<div className={openStatus ? "close_icon" : "open_icon"}></div></div>
      </div>
      <DatePicker extra={i18n.get("请选择")} locale={{ DatePickerLocale: { year: i18n.get("年"), month: i18n.get("月"), day: i18n.get("日"), hour: i18n.get("时"), minute: i18n.get("分") } }} okText={i18n.get("确定")} dismissText={i18n.get("取消")} mode="year" value={new Date((new Date()).setFullYear(year))} onChange={this.yearOnChange}>
        <div className="selectYear flex-center mb15">
          {i18n.get('年份选择')}:{year}
        </div>
      </DatePicker>
      <SelectTimeType value={timeType} data={timeTypedata} onChange={this.timeTypeOnChange} className="mb20" />
      <div className="chartTitle">{i18n.get('热点时间图')}</div>
      <div className="chart" ref="chart">
        {loading && <div className="loading"></div>}
      </div>
      <SelectRadioItem data={[{ name: i18n.get('过客量'), id: 0 }, { name: i18n.get('入店量'), id: 1 }]} value={counttype} onChange={this.counttypeOnchange} />
      <div className={openStatus ? "" : "hide"}>
        <div className="chartTitle pt25 mb15">{i18n.get('单店热点时段TOP3')}</div>
        <div className="rchart" ref="pChart">
          {loading && <div className="loading"></div>}
        </div>
      </div>
    </div>
  }
}

class FlowTrendChartSameRing extends React.Component {
  constructor() {
    super()
    this.state = {
      flowTypeDWMYData: null,
      timeType: 'day',
      openStatus: false,
      counttype: 1,
      loading: true
    }
  }
  componentDidMount() {
    let time = timeData.getTimeRange('day');
    this.query = {
      timeType: 'day',
      start: time.start,
      counttype: 1, //0-过客量 1-入店量 2-试穿量
      end: time.end,
      dataType: this.props.DataType,
      dataTypeID: this.props.id
    }
    this.getData()
  }
  getData = () => {
    this.query.dataTypeID = this.props.id;
    this.query.dataType = this.props.DataType;
    if (this.chart) {
      this.chart.dispose();
    }
    if (this.storeChart) {
      this.storeChart.dispose();
    }
    this.setState({ loading: true })
    api('/Flow/FlowTrendChartSameRing', this.query).then(data => {
      let timeType = this.state.timeType;
      this.setState({ loading: false })
      let cdata = data.data;
      let option = {
        textStyle: { fontSize: window.chatFontSize },
        grid: {
          left: '9%',
          top: '10%',
          width: '82%',
          height: '80%',
        },
        xAxis: {
          type: 'category',
          data: cdata.dataX,
          boundaryGap: false,
          axisTick: { show: false, lineStyle: { color: '#ccc' } },
          splitLine: { show: true, lineStyle: { color: '#ccc' } },
          axisLabel: { show: true, color: '#666', interval: 0 },
          axisLine: { show: true, lineStyle: { color: '#ccc' } },
        },
        yAxis: {
          type: 'value',
          axisTick: { show: false, lineStyle: { color: '#ccc' } },
          splitLine: { show: true, lineStyle: { color: '#ccc' } },
          axisLabel: { show: false, color: '#666', interval: 0 },
          axisLine: { show: true, lineStyle: { color: '#ccc' } },
        },
        dataZoom: {
          type: 'inside',
          zoomLock: true,
          startValue: timeType === 'hour' ? 0 : cdata.dataX.length - 7,
          endValue: timeType === 'hour' ? 5 : cdata.dataX.length - 1
        },
        series: {
          type: 'line',
          smooth: true,
          label: { normal: { show: true, color: '#666' } },
          lineStyle: { normal: { color: '#BFB1F7' } },
          data: cdata.dataY
        }
      }
      this.chart = echarts.init(this.refs.chart);
      this.chart.setOption(option);
      this.storeChart = echarts.init(this.refs.pChart);
      cdata.dataMom = cdata.dataMom.map(item => {
        return {
          value: Number(item),
          label: {
            normal: {
              show: true,
              formatter: '{c}%',
              position: Number(item) >= 0 ? 'top' : 'bottom'
            }
          }
        };
      });
      cdata.dataYoy = cdata.dataYoy.map(item => {
        return {
          value: Number(item),
          label: {
            normal: {
              show: true,
              formatter: '{c}%',
              position: Number(item) >= 0 ? 'top' : 'bottom'
            }
          }
        };
      });
      let option1 = {
        textStyle: { fontSize: window.chatFontSize },
        grid: {
          left: '9%',
          top: '10%',
          width: '82%',
          height: '70%',
        },
        legend: {
          data: [i18n.get('环比'), i18n.get('同比')],
        },
        color: ['#83C8FF', '#BDB0F8'],
        xAxis: {
          type: 'category',
          data: cdata.dataX,
          boundaryGap: true,
          axisTick: { show: false, lineStyle: { color: '#ccc' } },
          splitLine: { show: false, lineStyle: { color: '#ccc' } },
          axisLabel: { show: true, color: '#666', interval: 0, margin: 25 },
          axisLine: { show: true, lineStyle: { color: '#ccc' } },
        },
        yAxis: {
          type: 'value',
          axisTick: { show: false, lineStyle: { color: '#ccc' } },
          splitLine: { show: false, lineStyle: { color: '#ccc' } },
          axisLabel: { show: false, color: '#666', interval: 0 },
          axisLine: { show: true, lineStyle: { color: '#ccc' } },
        },
        dataZoom: {
          type: 'inside',
          zoomLock: true,
          startValue: timeType === 'hour' ? 0 : cdata.dataX.length - 5,
          endValue: timeType === 'hour' ? 5 : cdata.dataX.length - 1
        },
        series: [{
          type: 'bar',
          name: i18n.get('环比'),
          data: cdata.dataMom,
          itemStyle: {
            normal: { borderColor: '#83C8FF' }
          }
        }, {
          type: 'bar',
          name: i18n.get('同比'),
          data: cdata.dataYoy,
          itemStyle: {
            normal: { borderColor: '#BDB0F8' }
          }
        }]
      }
      this.storeChart.setOption(option1);
    });
  }
  timeTypeOnChange = (value, time) => {
    this.query.timeType = value;
    this.query.start = time.start;
    this.query.end = time.end;
    this.setState({ timeType: value }, () => {
      this.getData()
    })

  }
  counttypeOnchange = (value) => {
    this.query.counttype = value;
    this.setState({ counttype: value })
    this.getData()
  }
  open = () => {
    this.setState({ openStatus: !this.state.openStatus }, () => {
      this.storeChart.resize()
    })
  }
  render() {
    let { timeType, openStatus, counttype, loading } = this.state;
    return <div className="box flowTrendChartSameRing pb20">
      <div className="boxHead flex-vcenter">
        <div className="title">{i18n.get("客流走势分析")}</div>
        <div className="unitText flex-g-1">({i18n.get("单位:人次")})</div>
        <div className="open flex-center" onClick={this.open}>{openStatus ? i18n.get('收起') : i18n.get('展开')}<div className={openStatus ? "close_icon" : "open_icon"}></div></div>
      </div>
      <SelectTimeType value={timeType} onChange={this.timeTypeOnChange} className="mb25" />
      <div className="chartTitle pt5">{i18n.get("客流走势分析图")}</div>
      <div className="chart" ref="chart">
        {loading && <div className="loading"></div>}
      </div>
      <SelectRadioItem data={[{ name: i18n.get('过客量'), id: 0 }, { name: i18n.get('入店量'), id: 1 }]} value={counttype} onChange={this.counttypeOnchange} />
      <div className={openStatus ? "" : "hide"}>
        <div className="chartTitle pt5 mb5">{i18n.get("同环比图")}</div>
        <div className="rchart" ref="pChart">
          {loading && <div className="loading"></div>}
        </div>
      </div>
    </div>
  }
}

class FlowTypeDWMY extends React.Component {
  constructor() {
    super()
    this.state = {
      flowTypeDWMYData: null,
      timeType: 1,
    }
  }
  componentDidMount() {
    this.getData();
  }
  getData = () => {
    api('/Flow/FlowTypeDWMY', { DataType: this.props.DataType, DataTypeID: this.props.id }).then(data => {
      let d = {}
      data.result.forEach(item => {
        d[item.timetype] = item;
      })
      console.log(d)
      this.setState({ flowTypeDWMYData: d })
    });
  }
  timeTypeOnChange = (value) => {
    this.setState({ timeType: value });
  }
  render() {
    let { flowTypeDWMYData, timeType } = this.state;
    let timeTypedata = [{ name: i18n.get('日'), value: 1 }, { name: i18n.get('周'), value: 2 },
    { name: i18n.get('月'), value: 3 }, { name: i18n.get('季'), value: 4 }, { name: i18n.get('年'), value: 5 }]
    return <div>
      <div className="box flowTypeDWMYData">
        <SelectTimeType value={timeType} data={timeTypedata} onChange={this.timeTypeOnChange} className="mb25" />
        {flowTypeDWMYData &&
          <div className="">
            <div className="borderBottom flex mb15">
              <div className="flex-g-1 borderRight">
                <div className="number">{flowTypeDWMYData[timeType].InStoreCount}</div>
                <div className="text">{i18n.get('入店量(人次)')}</div>
              </div>
              <div className="flex-g-1">
                <div className="number">{flowTypeDWMYData[timeType].CrossCount}</div>
                <div className="text">{i18n.get('过客量(人次)')}</div>
              </div>
            </div>
          </div>}
      </div>
    </div>
  }
}

class Main extends React.Component {
  constructor(props) {
    super(props);
    let id;
    if (props.modelData) {
      id = props.modelData.id;
    } else if (props.id) {
      id = props.id;
    } else {
      id = props.params.id;
    }
    this.state = {
      id: id
    }
  }
  componentWillReceiveProps(nextProps) {
    this.setState({ id: nextProps.id }, () => {
      this.refs.FlowTypeDWMY.getData();
      this.refs.FlowTrendChartSameRing.getData();
      this.refs.FlowHotSpotTimeTopThree.getData();
      this.refs.FlowPlateauEffectRentTrendChart.getData();
      this.refs.FlowActivity.HolidayYearList();
    })
  }
  render() {
    let DataType, props = this.props;
    if (props.modelData) {
      DataType = props.modelData.type;
    } else if (props.id) {
      DataType = props.type;
    } else {
      DataType = props.params.type;
    }
    let { id } = this.state;
    return <div id="flow">
      <FlowTypeDWMY ref="FlowTypeDWMY" id={id} DataType={DataType} />
      <FlowTrendChartSameRing ref="FlowTrendChartSameRing" id={id} DataType={DataType} />
      <FlowHotSpotTimeTopThree ref="FlowHotSpotTimeTopThree" id={id} DataType={DataType} />
      <FlowPlateauEffectRentTrendChart ref="FlowPlateauEffectRentTrendChart" id={id} DataType={DataType} />
      <FlowActivity ref="FlowActivity" id={id} DataType={DataType} />
      {(DataType !== 1 && DataType !== 2 && DataType !== 3 && DataType !== 4) && <FlowSingleWeather id={id} DataType={DataType} />}
    </div>
  }
}


export default Main;